<template>
  <el-form-item v-if="attributes.isHidden ? !attributes.isHidden(): true" :class="attributes?.customClassName?.formItemClassName ?? ''"
                v-bind="attributes.formItem">
    <template
        v-for="item in attributes?.formItem?.slotScope ?? []"
        :key="item.slotName"
        v-slot:[item.slotName]="scope">
      <component :is="item.render(scope)"/>
    </template>
    <el-date-picker
        v-if="attributes.elDatetype ? !attributes.elDatetype: true"
        v-model="selectValue"
        :class="attributes?.customClassName?.elModelClassName ?? ''"
        :clearable="false"
        :editable="false"
        :format="attributes?.elModel?.format ?? 'YYYY-MM-DD'"
        :type="attributes?.type ?? 'daterange'"
        :value-format="attributes?.elModel?.format ?? 'YYYY-MM-DD'"
        end-placeholder="结束时间"
        is-range
        range-separator="~"
        rangeSeparator="至"
        startPlaceholder="开始时间"
        v-bind="attributes.elModel"/>

  </el-form-item>
</template>
<script setup>
import {computed, h} from 'vue'

const props = defineProps({
  value: {
    type: [String, Number, Boolean, Date, Array],
    required: true
  },
  attributes: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['push-val'])
const selectValue = computed({
  get() {
    return props.value
  },
  set(val) {
    emit('push-val', val)
  }
})
</script>
<style lang="scss" scoped>
:deep(.el-date-editor) {
  height: 40px !important;
  line-height: 40px;
  border: none !important;
  box-shadow: none !important;
  background: #F3F3F3 !important;

  .el-range-separator {
    font-size: 16px;
  }
}

:deep(.el-date-editor:hover) {
  box-shadow: none;
}

:deep(.el-date-editor.is-active) {
  box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
}
</style>